<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_页面全屏遮罩层</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,.3);
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <div class="main">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto autem consequuntur debitis delectus
            deleniti deserunt dolor, doloremque doloribus illo incidunt magni molestiae mollitia nisi nulla obcaecati
            praesentium similique suscipit unde!
        </div>
        <div>Doloribus excepturi facilis impedit incidunt mollitia quas quia reiciendis saepe soluta! Ab alias amet
            beatae corporis dolorem ea explicabo id odio, sit suscipit temporibus ullam vitae voluptate? Dicta eaque,
            earum?
        </div>
        <div>Adipisci aperiam, aspernatur debitis deleniti dicta dolorum eaque eius eligendi enim eum hic ipsam magnam
            maxime minima mollitia, numquam optio praesentium quaerat quo reiciendis repudiandae sequi sit sunt veniam
            voluptas.
        </div>
        <div>Ad consequatur culpa deleniti dicta dolores eaque expedita fugit hic illo incidunt iusto labore, laboriosam
            minus molestiae mollitia natus nemo nisi officiis quam saepe sequi similique soluta tenetur unde voluptate.
        </div>
        <div>Iusto labore nam numquam quaerat quibusdam quisquam recusandae repudiandae sequi temporibus vitae! Amet
            nesciunt nihil sint? Aliquam consectetur culpa delectus, dolorum fugit laborum, modi obcaecati soluta
            tenetur totam vero voluptates.
        </div>
        <div>At dolores excepturi facere ipsum necessitatibus placeat quas quod sed vel vitae. Adipisci commodi,
            consequuntur inventore ipsa nobis placeat praesentium quaerat. Aliquam aperiam labore magnam nobis odit
            porro ratione tempore.
        </div>
        <div>Animi assumenda aut autem beatae cupiditate, delectus dicta ducimus eos expedita facilis harum hic id
            inventore itaque laboriosam magnam modi neque nihil odit quidem quo sed sunt ullam vero voluptate?
        </div>
        <div>Ab aliquid amet asperiores at atque culpa cum debitis dicta dignissimos facere facilis harum iure
            laboriosam perferendis placeat porro, quae quaerat quidem quisquam repudiandae sint soluta suscipit, vero
            voluptates voluptatum!
        </div>
        <div>Ab aliquid amet at cum dolores eaque enim fugit iste nostrum possimus quae quas quia quos, reprehenderit
            repudiandae tempore ut vel vero! Dolor ea ex hic placeat quia quos reiciendis?
        </div>
        <div>Aut harum in laborum laudantium tenetur voluptatem voluptatibus? Aliquam assumenda at consequatur
            dignissimos dolores ducimus est excepturi fugiat illo ipsum iste iure labore neque nobis, optio quibusdam
            quo sint vero!
        </div>
        <div>Ab accusamus accusantium animi aut beatae blanditiis culpa cum eligendi illo officia placeat, quasi
            quibusdam quisquam, repellendus sed sunt ut? Aperiam deserunt impedit laboriosam modi non provident quod
            sint, voluptatem.
        </div>
        <div>Alias aperiam at aut dolor doloribus esse harum laudantium minima molestiae odio perferendis quaerat quam,
            qui quibusdam quod. Blanditiis, dolorem, qui. Ad architecto dolores maxime officia omnis perferendis placeat
            voluptates.
        </div>
        <div>At autem, beatae consectetur culpa cum deleniti eos est fuga in itaque officia quaerat quod quos similique
            totam? Ab consequuntur dicta, ducimus ea eos exercitationem necessitatibus quasi similique tempora ullam.
        </div>
        <div>Ab delectus distinctio doloribus error exercitationem neque, nobis nulla omnis quaerat quisquam tempora,
            tempore? Autem beatae ducimus earum excepturi fuga nulla omnis perferendis quaerat reiciendis rem, sequi
            tempora tenetur voluptate?
        </div>
        <div>Ad amet aperiam at delectus doloribus, ducimus et laboriosam magnam natus nisi nulla optio rem, totam
            voluptatem voluptatibus. Architecto asperiores exercitationem expedita incidunt ipsam quis repellendus
            similique suscipit. Nulla, vero!
        </div>
        <div>Alias, asperiores autem doloremque error excepturi facere, modi mollitia necessitatibus nisi repellat,
            suscipit totam? Animi aspernatur dignissimos dolorem facere incidunt, laborum minus numquam quis, quisquam
            sequi tempore tenetur, totam. Inventore!
        </div>
        <div>Consectetur dignissimos, dolorem enim ipsum iste laboriosam laudantium, nemo quia quidem rerum sunt
            suscipit tenetur voluptates! At, error ex inventore laudantium magni totam! Aut cum ea harum nobis provident
            veniam?
        </div>
        <div>Ad alias, aliquam animi commodi distinctio, ducimus eligendi error fugiat, maxime nihil quasi qui quod vel
            velit veniam vero voluptate. Aliquid amet, consequuntur ducimus eum laboriosam libero necessitatibus
            praesentium similique.
        </div>
        <div>Asperiores autem blanditiis, dicta dolorem eaque ex iusto nostrum optio tempora vitae. Ad aliquam animi
            doloremque facere fugiat illum laboriosam, numquam provident recusandae tenetur? Aspernatur blanditiis
            facere maiores quibusdam ratione!
        </div>
        <div>A accusamus aut commodi, dolore dolorem doloremque et hic ipsum mollitia nemo nisi numquam obcaecati
            officiis, perspiciatis quibusdam reiciendis repellendus rerum, sint suscipit ullam veniam veritatis
            voluptatum. Necessitatibus, nesciunt, qui!
        </div>
        <div>Consectetur excepturi ipsam perspiciatis porro. Adipisci aperiam aspernatur beatae, consequatur, cupiditate
            deleniti distinctio doloremque excepturi expedita itaque laudantium libero magni necessitatibus nesciunt
            nisi nostrum officia quasi quod, tenetur voluptate voluptatem.
        </div>
        <div>Aspernatur, ducimus eum fuga iusto molestiae quasi sint voluptatum? Animi corporis cupiditate ducimus enim,
            id officia perferendis. Deserunt earum eos et, eveniet fuga harum laudantium neque placeat rem soluta, vel.
        </div>
        <div>Dolor dolore labore nostrum quis! Accusamus assumenda ducimus, eaque facere harum magnam nostrum placeat
            praesentium, quae quaerat sequi similique vero vitae! Amet dolore inventore, iusto molestiae nihil
            perferendis rem vel.
        </div>
        <div>Esse eum illum inventore itaque magnam, omnis provident saepe similique unde vel. Cum eius in ipsa iste
            laboriosam recusandae sequi voluptas? Ad asperiores commodi distinctio doloribus laboriosam repudiandae
            saepe sequi.
        </div>
        <div>Delectus doloribus eaque earum inventore ipsa? Ab autem dolorem expedita impedit, inventore necessitatibus
            obcaecati repudiandae soluta vel velit. A architecto atque eaque exercitationem, expedita facilis hic
            laborum molestias rerum soluta!
        </div>
        <div>Consequatur debitis ducimus eius exercitationem expedita itaque iure laborum natus, nesciunt possimus
            quibusdam quisquam sequi veniam. Dolorum eos esse illo in itaque magni, minus omnis quae quas reiciendis
            reprehenderit soluta.
        </div>
        <div>Alias amet animi asperiores at, blanditiis culpa dolorem, eius enim error esse eveniet in incidunt iure
            laborum minus molestiae necessitatibus nostrum nulla obcaecati perferendis placeat, rerum soluta tempora
            veniam vitae.
        </div>
        <div>Accusamus animi aspernatur aut commodi consectetur cupiditate, deleniti eveniet ex explicabo maxime nemo
            nihil, optio quae quasi qui quia quibusdam quisquam quod rem suscipit tempore unde voluptates? Consequatur,
            illo, quia.
        </div>
        <div>Architecto assumenda consequatur corporis debitis dignissimos ea error eum eveniet ex excepturi facilis
            fugiat fugit hic maxime minus, modi, molestiae nulla perspiciatis placeat quas quibusdam sapiente soluta
            ullam vel voluptas?
        </div>
        <div>Deleniti enim ipsum, laborum neque nisi quae rem veritatis! Amet blanditiis consectetur consequatur cum
            debitis delectus dolores eveniet facere illum, labore minima nesciunt officiis perspiciatis porro quaerat
            quo reprehenderit ullam.
        </div>
        <div>Aliquam amet fugiat incidunt modi molestias neque nisi sequi? Ab architecto culpa, dolores dolorum eius
            esse mollitia necessitatibus non nostrum possimus qui ratione repellat sed voluptas voluptatibus? Debitis,
            iure, natus!
        </div>
        <div>Aliquid, culpa eum facere ipsa ipsam ipsum magnam maxime molestiae nesciunt officiis perferendis quidem
            repellat sit soluta ullam unde vero! Asperiores autem cumque enim exercitationem fugit harum numquam tenetur
            voluptas!
        </div>
        <div>Dolore neque quaerat rerum! Dolorem eaque fugit itaque praesentium provident? Beatae dignissimos dolorem
            dolores, fugit id, in ipsam iure, laudantium libero magni non porro possimus reiciendis repudiandae tempora
            velit voluptas.
        </div>
        <div>A alias dolores eaque, facilis laudantium molestiae nihil omnis reprehenderit rerum saepe, sint tenetur.
            Adipisci architecto autem distinctio et in, laudantium libero minus nisi odit quaerat reiciendis sint,
            voluptates, voluptatum.
        </div>
        <div>Aliquid aperiam deleniti dolorum eius facere illum ipsa magnam maxime minima quas reiciendis, temporibus
            veritatis! Enim in inventore laborum nemo quasi ratione tempora voluptatum! Accusantium architecto illum non
            quod ut?
        </div>
        <div>Accusamus amet blanditiis consequuntur deserunt dolore dolorem doloremque, dolores, eius, eos explicabo id
            in laboriosam magni maiores molestiae mollitia nam odio praesentium qui quis quisquam reiciendis sed sint
            suscipit totam?
        </div>
        <div>Cumque ipsam iusto laborum saepe? At fugiat numquam quisquam quod saepe. Animi atque cupiditate eaque ipsam
            itaque magnam maxime quae quam temporibus voluptatum. Corporis cumque doloremque in inventore, molestias
            voluptatibus!
        </div>
        <div>Dicta enim exercitationem illo laboriosam nulla perspiciatis quidem tempore unde? Ab consectetur delectus
            dolorem ducimus ea exercitationem illum incidunt, itaque nemo quas, sequi similique vel? Eos facere iusto
            libero reprehenderit?
        </div>
        <div>Beatae eveniet harum illo incidunt ipsum optio, perferendis possimus quisquam recusandae repellendus velit
            voluptate, voluptates voluptatibus. Alias aut, doloribus expedita mollitia perspiciatis quidem recusandae
            sunt ullam? Eveniet fugiat id sit.
        </div>
        <div>Accusantium asperiores atque, beatae blanditiis consequuntur dicta doloremque, eligendi, enim esse
            explicabo facilis laboriosam magnam maiores officia quasi soluta vitae? Accusantium architecto culpa debitis
            ea earum ex fugit necessitatibus rerum.
        </div>
        <div>Animi consequatur dicta ipsam itaque iusto. Aliquid, dicta dignissimos, exercitationem facilis fuga in iste
            iure, mollitia nemo possimus quod voluptatibus. Delectus dolore esse id, ipsa odit praesentium quibusdam
            similique totam!
        </div>
        <div>Autem commodi culpa delectus eos expedita harum maxime nobis, nostrum odit perferendis placeat quas quasi
            qui quis tenetur vero voluptas, voluptate? Asperiores culpa cumque iste molestias nulla numquam perferendis
            voluptate?
        </div>
        <div>Aliquam et eveniet ex odit quibusdam, repellendus repudiandae. Aperiam architecto cumque deleniti
            distinctio dolores earum ex laudantium magni natus, nobis, obcaecati ratione recusandae, repellendus sed sit
            tempora tenetur ut vero.
        </div>
        <div>Aspernatur eaque earum facere, laudantium perspiciatis quidem quis sapiente tempora temporibus! Beatae
            dolore eveniet labore quam saepe! Quasi repudiandae tempora voluptatibus. Accusamus aut illo, nulla odit
            omnis pariatur unde voluptas?
        </div>
        <div>Deleniti doloribus, fuga obcaecati perferendis reprehenderit suscipit veritatis voluptatibus. Accusamus
            alias animi beatae culpa debitis dolore dolores eligendi fugit id minima odit officia possimus qui quia,
            quis quisquam sint tempore?
        </div>
        <div>Accusamus debitis ex harum labore minus sint, ullam voluptatem! Adipisci alias aliquam assumenda autem,
            consequatur debitis deleniti distinctio esse laborum omnis pariatur praesentium reiciendis reprehenderit
            saepe sequi soluta ut velit?
        </div>
        <div>A aliquid consectetur incidunt iusto nobis placeat quidem, saepe. Accusamus dolor enim officia quos sed?
            Accusamus aperiam, distinctio, esse ex expedita facere laudantium molestiae nam nulla, pariatur quo quod
            reprehenderit!
        </div>
        <div>Aut est laborum laudantium quam vel, veniam! Ab aspernatur cupiditate dicta, dignissimos eaque enim, error
            fugiat in magnam necessitatibus nemo nesciunt officiis, pariatur qui saepe velit vitae voluptates. In,
            suscipit.
        </div>
        <div>Commodi deleniti earum exercitationem labore nulla optio quam sint sunt vero! Cum dolore fugit quas
            voluptates? Animi architecto doloremque, ea fugiat iure labore laborum nostrum sint! Doloribus molestias
            tempora totam.
        </div>
        <div>Amet consectetur dignissimos dolorem ea esse et exercitationem, fuga iusto laboriosam, laudantium, nihil
            nostrum officiis quos sunt tempora? Aliquam at dolor eaque hic id itaque labore maxime, minus nisi sed.
        </div>
        <div>Accusamus animi assumenda blanditiis consequatur debitis distinctio dolorum ducimus earum enim eos error
            est expedita ipsam ipsum laborum magni officiis omnis perferendis possimus, quod sapiente sunt suscipit,
            totam velit vitae.
        </div>
        <div>Consequatur consequuntur deleniti dolores ex expedita facere illo illum impedit ipsam iste iure maiores
            nesciunt nihil perferendis perspiciatis quasi, quibusdam quos ratione reprehenderit repudiandae saepe
            sapiente tempore voluptas voluptatem voluptatibus.
        </div>
        <div>Aliquam, aut doloremque fugiat laborum molestiae nisi, odio omnis porro quam sint, tenetur totam unde
            voluptatum? At doloremque earum facere, impedit incidunt inventore ipsum nihil provident ratione repellendus
            totam, voluptates.
        </div>
        <div>Consectetur eos et facere hic incidunt laborum magnam nihil obcaecati porro quae sint, veritatis
            voluptatem. Ducimus error laborum molestias optio, quia sed soluta sunt. Autem delectus dolorum libero
            nostrum optio.
        </div>
        <div>Ab accusamus aperiam consequatur consequuntur culpa dicta dignissimos excepturi explicabo, hic illo, in
            laudantium molestias nemo nisi numquam officia officiis quas quo unde voluptates. Consequatur distinctio
            exercitationem ipsam molestiae nemo!
        </div>
        <div>Assumenda at consequuntur culpa cumque doloremque et ex fuga id ipsam itaque iusto, labore libero molestiae
            nisi nobis nulla provident quam quas quidem recusandae rem tempore, vel vero. Asperiores, dolor!
        </div>
        <div>Ab amet, animi atque cumque iusto laboriosam quam quisquam. Adipisci autem, beatae delectus ducimus facere
            ipsa ipsam iste magnam, molestiae officia perferendis possimus, qui rerum sit suscipit! Aliquid cumque,
            dignissimos.
        </div>
        <div>Accusamus aliquam, aperiam consectetur cum est explicabo laboriosam odio omnis, porro qui reiciendis rem,
            repellendus sapiente sed sit tempora veritatis. A aperiam earum neque tenetur ut. Et magni odio sequi.
        </div>
        <div>Adipisci culpa exercitationem labore obcaecati quidem! Aperiam commodi consectetur culpa earum impedit
            libero molestiae, nostrum possimus provident quam quibusdam reprehenderit, rerum sit tempora voluptatibus?
            Maxime natus neque rem vitae voluptas!
        </div>
        <div>Incidunt iusto labore minus, nesciunt nisi praesentium quam repellendus vero voluptatem? A autem, dolore
            doloremque dolores ducimus eveniet illo impedit ipsa necessitatibus obcaecati odio officiis quod reiciendis
            repellat vel voluptates.
        </div>
    </div>
</body>
</html>